import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Row, Col, message } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import styles from './Center.less';
import UpdateDepartmentForm from '@/pages/Account/Center/components/UpdateDepartmentForm';

@connect(({ loading, user }) => ({
  listLoading: loading.effects['list/fetch'],
  currentUser: user.currentUser,
  currentUserLoading: loading.effects['user/fetchCurrent'],
}))
class Center extends PureComponent {
  state = {
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/fetchCurrent',
      callback: currentUser => {
        this.setState({
          modalVisible: currentUser.departmentName == null || currentUser.departmentName === '',
        });
      },
    });
    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
      },
    });
  }

  onTabChange = key => {
    const { match } = this.props;
    switch (key) {
      case 'messages':
        router.push(`${match.url}/messages`);
        break;
      default:
        break;
    }
  };

  handleModalVisible = isShow => {
    this.setState({
      modalVisible: isShow,
    });
  };

  handleUpdate = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/editDepartment',
      payload: { department: fields.department },
      callback: () => {
        message.success('修改成功');
        this.setState({
          modalVisible: false,
        });
      },
    });
  };

  render() {
    const { listLoading, currentUser, currentUserLoading, match, location, children } = this.props;

    const { modalVisible } = this.state;
    const parentMethods = {
      handleUpdate: this.handleUpdate,
      handleModalVisible: this.handleModalVisible,
    };

    const operationTabList = [
      {
        key: 'messages',
        tab: (
          <span>
            我的消息 <span style={{ fontSize: 14 }}>(0)</span>
          </span>
        ),
      },
    ];

    return (
      <GridContent className={styles.userCenter}>
        <Row gutter={24}>
          <Col lg={24}>
            <h2>{currentUser.nickname}，欢迎您~</h2>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col lg={7} md={24}>
            <Card bordered={false} style={{ marginBottom: 24 }} loading={currentUserLoading}>
              {currentUser && Object.keys(currentUser).length ? (
                <div>
                  <div className={styles.avatarHolder}>
                    <img alt="" src={currentUser.avatar} />
                    <div className={styles.name}>{currentUser.nickname}</div>
                    <div>{currentUser.signature}</div>
                  </div>
                  <div className={styles.detail}>
                    <p>
                      <i className={styles.title} />
                      {currentUser.position}
                    </p>
                    <p>
                      <i className={styles.group} />
                      {currentUser.departmentName}
                    </p>
                  </div>
                </div>
              ) : (
                'loading...'
              )}
            </Card>
          </Col>
          <Col lg={17} md={24}>
            <Card
              className={styles.tabsCard}
              bordered={false}
              tabList={operationTabList}
              activeTabKey={location.pathname.replace(`${match.path}/`, '')}
              onTabChange={this.onTabChange}
              loading={listLoading}
            >
              {children}
            </Card>
          </Col>
        </Row>
        {/*{modalVisible && <UpdateDepartmentForm {...parentMethods} modalVisible={modalVisible} />}*/}
      </GridContent>
    );
  }
}

export default Center;
